<template>
  <div class="excel-container">
    <div class="app-container">
      <el-card>
        <!-- 使用上传excel组件 -->
        <!-- :before-upload上传之前的检验，:on-success：上传成功后的处理 -->
        <upload-excel
          :before-upload="handleBeforeUpload"
          :on-success="handleUploadSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getJsDateFromExcel } from "excel-date-to-js";
import dayjs from "dayjs";
//这是验证这个包是否安装成功
// console.log(dayjs(getJsDateFromExcel(44266)).format("YYYY-MM-DD"));
import { addEmployeeBatchAPI } from "@/api/employees";
export default {
  name: "excel",
  methods: {
    //上传之前的检验 file:选择/拖拽的文件对象，可以校验文件大小，
    // 通过需要返回true，否则返回false
    // 并且只有在返回true的条件下，才会触发上传成功
    handleBeforeUpload(file) {
      // return true;
      //约束文件大小
      //file.size:文件大小，单位是字节(Byte)
      const isMt5M = file.size / 1024 / 1024 > 5;
      if (isMt5M) {
        //如果超过了给个提示
        this.$message.warning("文件大小不能超过5M");
        //不通过
        return false;
      }
      //通过了
      return true;
    },
    //上传成功后的处理
    async handleUploadSuccess({ header, results }) {
      //header: Excel的表头字符串数组，results: Excel的表体对象数组
      const zh2enkey = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
      };
      //处理转化results数组，把中文key转化为英文key
      // 遍历数组results数组,得到新数组
      const employeeList = results.map((item) => {
        //定义一个空对象
        const obj = {};
        Object.keys(item).forEach((key) => {
          //根据中文key得到英文key
          const enkey = zh2enkey[key];
          // 给obj添加英文key并赋值
          // 如果当前英文key是 time0fEntry 或 correctionTime
          // 需要对Excel时间戳做转换
          if (enkey === "timeOfEntry" || enkey === "correctionTime") {
            // getJsDateFromExcel(item[key]): 把Excel时间戳转换为JS日期对象
            // dayjs().format('YYYY-MM-DD): 把得到的JS日期对象转换为日期格式字符串
            obj[enkey] = dayjs(getJsDateFromExcel(item[key])).format(
              "YYYY-MM-DD"
            );
          } else {
            obj[enkey] = item[key];
          }
        });
        //返回一个对象
        return obj;
      });
      console.log(employeeList);
      //发起批量新增员工请求
      await addEmployeeBatchAPI(employeeList);
      //给个批量新增的提示
      this.$message.success("批量新增成功");
      //返回员工列表
      // this.$router.back()
      this.$router.go(-1);
    },
  },
};
</script>

<style></style>
